<template>
  <router-view v-if="route.matched.length === 3" @updated="handleUpdated" />
  <e-container v-else v-permission="'BasicInformation:Query'" :loading="!basicInfo.loaded">
    <a-space>
      <e-title title="Basic Information" />
      <a-divider type="vertical" />
      <a-button
        v-permission="'BasicInformation:Edit'"
        type="link"
        size="small"
        @click="() => router.push({ name: 'Edit Basic Information' })"
      >
        <a-space>
          <e-icon type="edit" line-height="22px" />
          Edit
        </a-space>
      </a-button>
    </a-space>
    <div class="table">
      <a-row>
        <a-col :span="4" class="cell field">Client Number</a-col>
        <a-col :span="8" class="cell value">{{ basicInfo.raw.value.clientNum }}</a-col>
        <a-col :span="4" class="cell field">Client Nature</a-col>
        <a-col :span="8" class="cell value">{{ basicInfo.transformed.value.clientKind }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Client Name</a-col>
        <a-col :span="8" class="cell value">{{ basicInfo.raw.value.fullName }}</a-col>
        <a-col :span="4" class="cell field">Country/Region</a-col>
        <a-col :span="8" class="cell value">
          <e-country-or-region :code="basicInfo.raw.value.countryID" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Abbreviation</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.shortName) }}</a-col>
        <a-col :span="4" class="cell field">City/State</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.city) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Organization</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.transformed.value.parentID) }}</a-col>
        <a-col :span="4" class="cell field">Time Zone</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.transformed.value.timeZone) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Business Area</a-col>
        <a-col :span="8" class="cell value">{{
          Utils.transformNullValue(basicInfo.transformed.value.businessDirection)
        }}</a-col>
        <a-col :span="4" class="cell field">
          <client-tier-tip />
        </a-col>
        <a-col :span="8" class="cell value">{{
          Utils.transformNullValue(basicInfo.transformed.value.clientTier)
        }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Client Industry</a-col>
        <a-col :span="20" class="cell value">
          {{ Utils.transformNullValue(basicInfo.transformed.value.saleBUID) }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">My BU</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(basicInfo.transformed.value.hrSalesBUID) }}
        </a-col>
        <a-col :span="4" class="cell field">Operate BU</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(basicInfo.transformed.value.operateBU) }}
        </a-col>
      </a-row>
      <a-row v-if="!briefInfo.isExisting">
        <a-col :span="4" class="cell field">Owner</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.owner) }}</a-col>
        <a-col :span="4" class="cell field">Shared Persons</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.shareOwner) }}</a-col>
      </a-row>
      <a-row v-else>
        <a-col :span="4" class="cell field">Owner</a-col>
        <a-col :span="20" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.owner) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Status</a-col>
        <a-col :span="8" class="cell value"> <e-client-status :status="basicInfo.raw.value.status" /></a-col>
        <a-col :span="4" class="cell field">Zip Code</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.postalCode) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Email</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.email) }}</a-col>
        <a-col :span="4" class="cell field">Office Phone</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.telephone) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">URL</a-col>
        <a-col :span="20" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.url) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Address</a-col>
        <a-col :span="20" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.address) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Remark</a-col>
        <a-col :span="20" class="cell value">{{ Utils.transformNullValue(basicInfo.raw.value.description) }}</a-col>
      </a-row>
    </div>
  </e-container>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import EClientStatus from '@/components/EClientStatus.vue'
import EIcon from '@/components/EIcon.vue'
import ECountryOrRegion from '@/components/ECountryOrRegion.vue'
import Utils from '@/utils'
import { useBasicInfo } from '@/pages/Client/hooks/useBasicInfo.js'
import ClientTierTip from '@/pages/components/ClientTierTip.vue'
import { computed } from 'vue'
const store = useStore()
const briefInfo = computed(() => store.state.client.briefInfo)
const route = useRoute()
const router = useRouter()
const { basicInfo, reload } = useBasicInfo(route.params.id)
const handleUpdated = () => {
  reload()
}
</script>

<style lang="less" scoped>
@border: 1px solid @lighter-gray;
.title {
  display: flex;
}
.table {
  border: @border;
  margin-top: 24px;
  .cell {
    padding: 10px 14px;
    border-bottom: @border;
    border-right: @border;
    &:last-child {
      border-right: none;
    }
    &.field {
      background-color: @milk;
      color: @text-gray;
    }
  }
  .ant-row:last-child {
    .cell {
      border-bottom: none;
    }
  }
}
</style>
<route lang="yaml">
name: Basic Information
path: '/client/:id/basic-information'
meta:
  sort: 10
  icon: Basic_Information
  permission: BasicInformation
</route>
